<template>
  <div class="table-wrap" v-loading="isShow">
    <div class="attachment-form">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div class="attachment-form-title">基本信息</div>
      </div>
      <el-form
        :model="parameter"
        ref="rulesRef"
        :rules="formRules"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-row :gutter="24">
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="区（市）县" prop="area">
              <el-select
                placeholder="区（市）县"
                v-model="parameter.area"
                clearable
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              >
                <el-option
                  v-for="item in projectAreaOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="批次名称">
              <el-input
                placeholder="请输入"
                v-model="parameter.batchName"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="项目名称"
              prop="projectName"
            >
              <el-input
                placeholder="请输入"
                v-model="parameter.projectName"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="项目编号" prop="projectNo">
              <el-input
                placeholder="请输入"
                v-model="parameter.projectNo"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="项目地址">
              <el-input
                placeholder="请输入"
                v-model="parameter.projectAddress"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="项目用地总面积">
              <el-input
                placeholder="请输入"
                v-model="parameter.xmydzmj"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
                @input="handleXmydzmj"
              >
                <template slot="append">公顷</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="农用地面积">
              <el-input
                placeholder="请输入"
                v-model="parameter.nydmj"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
                @input="handleNydmj"
              >
                <template slot="append">公顷</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="耕地面积">
              <el-input
                placeholder="请输入"
                v-model="parameter.gdmj"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
                @input="handleGdmj"
              >
                <template slot="append">公顷</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="建设用地面积">
              <el-input
                placeholder="请输入"
                v-model="parameter.jsydmj"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
                @input="handleJsydmj"
              >
                <template slot="append">公顷</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="未利用地面积">
              <el-input
                placeholder="请输入"
                v-model="parameter.wlydmj"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
                @input="handleWlydmj"
              >
                <template slot="append">公顷</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="勘界系统（出报告时间）">
              <!-- <el-input placeholder="请输入" v-model="parameter.kjxtTime"></el-input> -->
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="parameter.kjxtTime"
                type="date"
                placeholder="选择日期"
                :clearable="false"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="组卷系统（受理时间）">
              <!-- <el-input placeholder="请输入" v-model="parameter.zjxtTime"></el-input> -->
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="parameter.zjxtTime"
                type="date"
                :clearable="false"
                placeholder="选择日期"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="报送市政府时间">
              <!-- <el-input placeholder="请输入" v-model="parameter.bsszfTime"></el-input> -->
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="parameter.bsszfTime"
                type="date"
                placeholder="选择日期"
                :clearable="false"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="批复文号">
              <el-input
                placeholder="请输入"
                v-model="parameter.pfNumber"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="批复时间">
              <!-- <el-input placeholder="请输入" v-model="parameter.pfTime"></el-input> -->
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="parameter.pfTime"
                type="date"
                placeholder="选择日期"
                :clearable="false"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="附件图片" prop="fileList">
              <UploadVue
                class="file-upload"
                v-model="parameter.fileList"
                :disabled="
                  !isDefaultTab || type == 'detail'
                "
                :showFileList="false"
                :showProgress="true"
              />
              <div class="process-img">
                <div
                  class="process-img-item"
                  v-for="(img, index) of parameter.fileList"
                  :key="index"
                >
                  <el-image
                    :src="
                      getImage(
                        img.fileId ||
                          img.response.data ||
                          img.extra.fileId
                      )
                    "
                    :preview-src-list="
                      parameter.fileList.map((item) =>
                        getImage(
                          item.fileId ||
                            item.response.data ||
                            item.extra.fileId
                        )
                      )
                    "
                  />
                  <i
                    class="el-icon-error"
                    @click="deleteImg(index)"
                    v-if="
                      !(!isDefaultTab || type == 'detail')
                    "
                  ></i>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="attachment-form">
      <div class="attachment-form-title">附件材料</div>
      <div class="attachment-form-content">
        <table class="table">
          <thead>
            <tr>
              <th>序号</th>
              <th>材料名称</th>
              <th style="width: 40%">上传文件</th>
              <th
                style="width: 20%"
                v-if="!(!isDefaultTab || type == 'detail')"
              >
                操作
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(
                item, index
              ) in parameter.landDataManageAttachmentRelList"
              :key="index"
            >
              <td>{{ item.orderIndex }}</td>
              <td>{{ item.attachmentName }}</td>
              <td>
                <UploadVue
                  v-model="item.attachmentList"
                  :disabled="
                    !isDefaultTab || type == 'detail'
                  "
                />
              </td>
              <td
                v-if="!(!isDefaultTab || type == 'detail')"
              >
                <div class="table-btn"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
// import { queryOptions } from '@/api/dict'
import { getDetail, getOnlyName } from '@/api/tudi'
import { queryOptions } from '@/api/dict'
import UploadVue from '@/components/upload'
import { securityFileUrl } from '@/api/wisdomBuild'
export default {
  props: {
    currentTab: {
      type: [String, Number],
      default: '0'
    },
    pkid: String,
    type: { type: String, default: 'edit' },
    defaultIndex: {
      type: [Number, String],
      default: '0'
    }
  },
  components: {
    UploadVue
  },
  data() {
    var projectNameRul = (rule, value, callback) => {
      if (this.timeOut) {
        clearTimeout(this.timeOut)
      }
      this.timeOut = setTimeout(async () => {
        this.timeOut = null
        if (!value) {
          return callback('项目名称不能为空')
        }
        await getOnlyName(value).then((res) => {
          if (
            res.data &&
            value !== this.parameterModel.projectName
          ) {
            //修改成不一样的值才做重复名称校验
            return callback('项目名称重复')
          } else {
            callback()
          }
        })
        callback()
      }, 1000)
    }
    return {
      timeOut: null,
      isShow: false,
      projectAreaOptions: [],
      parameter: {
        area: '',
        fileList: [],
        landDataManageAttachmentRelList: [
          {
            orderIndex: 1,
            attachmentName: '出让合同',
            attachmentList: []
          },
          {
            orderIndex: 2,
            attachmentName: '土地成交确认书',
            attachmentList: []
          },
          {
            orderIndex: 3,
            attachmentName: '履约协议',
            attachmentList: []
          }
        ]
      },
      parameterModel: {},
      formRules: {
        area: [
          {
            required: true,
            message: '请选择区(县)市',
            trigger: 'change'
          }
        ],
        projectName: [
          {
            validator: projectNameRul,
            trigger: 'blur',
            required: true
          }
        ],
        projectNo: [
          {
            required: true,
            message: '请选择项目编号',
            trigger: 'change'
          }
        ]
      }
    }
  },
  async created() {
    await this.getAreaOptions()
    if (this.pkid) {
      await this.getDetailData()
    }
  },
  computed: {
    isDefaultTab() {
      if (this.defaultIndex == this.currentTab) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    // 展示图片
    getImage(pkid) {
      return securityFileUrl(pkid)
    },
    // 删除进度照片
    deleteImg(index) {
      this.parameter.fileList.splice(index, 1)
    },
    getAreaOptions() {
      queryOptions('area').then((res) => {
        if (res.success) {
          this.projectAreaOptions = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    getDetailData() {
      this.isShow = true
      getDetail(this.pkid).then((res) => {
        this.parameter = JSON.parse(
          JSON.stringify(res.data)
        )
        this.parameter.landDataManageAttachmentRelList = [
          {
            orderIndex: 1,
            attachmentName: '出让合同',
            attachmentList: res.data.contractList || []
          },
          {
            orderIndex: 2,
            attachmentName: '土地成交确认书',
            attachmentList: res.data.dealList || []
          },
          {
            orderIndex: 3,
            attachmentName: '履约协议',
            attachmentList: res.data.keepList || []
          }
        ]

        this.parameterModel = JSON.parse(
          JSON.stringify(res.data)
        )
        this.isShow = false
      })
    },
    handleXmydzmj(value) {
      if (value != '') {
        this.parameter.xmydzmj = value
          .replace(/[^0-9.]/g, '')
          .replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      }
    },
    handleNydmj(value) {
      if (value != '') {
        this.parameter.nydmj = value
          .replace(/[^0-9.]/g, '')
          .replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      }
    },
    handleGdmj(value) {
      if (value != '') {
        this.parameter.gdmj = value
          .replace(/[^0-9.]/g, '')
          .replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      }
    },
    handleJsydmj(value) {
      if (value != '') {
        this.parameter.jsydmj = value
          .replace(/[^0-9.]/g, '')
          .replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      }
    },
    handleWlydmj(value) {
      if (value != '') {
        this.parameter.wlydmj = value
          .replace(/[^0-9.]/g, '')
          .replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      }
    },
    async validatorForm() {
      var result = false
      var that = this
      await this.$refs.rulesRef.validate((validator) => {
        that.result = validator
        return result
      })
      return result
    }
  }
}
</script>

<style scoped lang="scss">
.attachment-form {
  padding: 0 27px;
  &-title {
    color: #4c565c;
    display: flex;
    align-items: center;
    margin: 18px 0 14px 0;
    font-size: 16px;
    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 14px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      margin-right: 7px;
    }
  }
  &-content {
    padding-left: 10px;
    width: 100%;
    overflow: hidden;
    padding-bottom: 20px;
    .table {
      border-collapse: collapse;
      width: 100%;
      box-sizing: border-box;
      thead {
        background-color: #f2f6fb;
      }
      td,
      th {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #6b767d;
        line-height: 42px;
        border: 1px solid #f2f6fb;
        text-align: center;
      }
      td {
        font-weight: normal;
      }
      tbody {
        tr {
          td {
            &:nth-child(1) {
              width: 50px;
            }
            &:nth-child(2) {
              width: 300px;
            }
            &:nth-child(3) {
              width: 300px;
            }
            &:nth-child(4) {
              max-width: 1000px;
            }
            &:nth-child(5) {
              width: 300px;
            }
          }
        }
      }
    }
    ::v-deep .el-upload {
      position: absolute !important;
      right: -25% !important;
      top: 50% !important;
      transform: translate(50%, -50%) !important;
    }
  }
}
.disabled {
  cursor: default;
}
::v-deep {
  .el-input__inner {
    width: 320px;
  }

  .el-form-item__label {
    line-height: 14px;
  }

  .file-upload {
    .el-upload {
      position: absolute;
      left: 240px;
      top: -35px;
    }
  }
}
.process-img {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  &-item {
    width: 200px;
    height: 140px;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    .el-image {
      width: 100%;
      height: 100%;
    }
    video {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    .el-icon-error {
      position: absolute;
      right: 0;
      top: 0;
      color: red;
      font-size: 24px;
      cursor: pointer;
    }
  }
}
</style>
